<template>
    <div ref="chart"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
    data() {
        return {}
    },
    props: {
        spectrumData: {
            type: Array,
            default() {
                return []
            },
        },
        spectrumFre: {
            type: Array,
            default() {
                return []
            },
        },
    },
    methods: {},
    mounted() {

        let chart = this.$refs.chart
        let myChart = echarts.init(chart)
        if (myChart) myChart.clear()
        let data = []
        let data1 = []
        let times = []
        for (let i in this.spectrumData) {
            data1 = []
            for (let x in this.spectrumFre[i].value) {
                data1.push([this.spectrumFre[i].value[x], this.spectrumData[i].times[x], this.spectrumData[i].value[x]])
            }
            times.push(this.spectrumFre[i].time)
            data.push({
                type: 'line3D',
                name: this.spectrumFre[i].time,
                lineStyle: {
                    width: 4,
                },
                data: data1,
            })
        }

        let option = {
            tooltip: {
                formatter: (p) => {
                    return `
                        时间：${p.data[1]}
                        <br />频率：${p.data[0]}
                        <br />振幅：${p.data[2]}
                        `
                },
            },
            xAxis3D: {
                name: '频率',
                nameTextStyle: {
                    color: 'aqua',
                },
                type: 'value',
                axisLabel: {
                    textStyle: {
                        color: 'aqua',
                    },
                },
                axisPointer: {
                    lineStyle: {
                        color: '#fff',
                        width: 0.6,
                    },
                },
                axisLine: {
                    lineStyle: {
                        color: '#B2E3FF',
                        width: 0.6,
                    },
                },
            },
            yAxis3D: {
                name: '',
                nameTextStyle: {
                    color: 'aqua',
                },
                type: 'category',
                axisLabel: {
                    formatter: (params) => params.slice(0, 19),
                    textStyle: {
                        color: 'aqua',
                    },
                },
                splitNumber: this.spectrumFre.length,
                axisPointer: {
                    show: false,
                    lineStyle: {
                        color: '#fff',
                        width: 0.6,
                    },
                },
                axisLine: {
                    lineStyle: {
                        color: '#B2E3FF',
                        width: 0.6,
                    },
                },
            },
            zAxis3D: {
                name: '振幅',
                nameTextStyle: {
                    color: 'aqua',
                },
                type: 'value',
                axisLabel: {
                    textStyle: {
                        color: 'aqua',
                    },
                },
                axisPointer: {
                    show: false,
                    lineStyle: {
                        color: '#fff',
                        width: 0.6,
                    },
                },
                axisLine: {
                    lineStyle: {
                        color: '#B2E3FF',
                        width: 0.6,
                    },
                },
            },
            grid3D: {
                boxHeight: 80,
                boxWidth: 180,
                boxDepth: 70,
                viewControl: { center: [0, -30, -15] },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#B2E3FF',
                        width: 0.4,
                        type: 'dotted',
                    },
                },
            },
            series: [...data],
        }
        myChart.setOption(option)
        const chartObserver = new ResizeObserver(() => {
            myChart.resize()
        })
        chartObserver.observe(chart)
        window.addEventListener('resize', function () {
            myChart.resize()
        })
    },
}
</script>

<style></style>
